<template>
  <div class="chart-container">
      <div id="container"
           element-loading-text="图表生成中"
           :element-loading-spinner="svg"
           element-loading-background="rgba(122, 122, 122, 0.8)">
        <p v-if="!loading">图表展示：</p>
          <el-empty description="暂无数据图表" v-if="loading" />
      </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, watch} from "vue";
import { inject } from 'vue';

const chartData = inject("chartData");
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
const loading = ref(true);


watch(chartData,  (newVal,oldVal) => {
    if(newVal.chartId >0){
        loading.value = false;
        render(newVal);
    }
    loading.value = newVal.loading !== true;
})






</script>

<style scoped>
.chart-container{
    width: 53%;
    height: 93%;
    margin-top: 10px;
    #container{
        width: 100%  ;
        height: 95%;
    }
}
</style>